import {defineStore} from 'pinia';
// import {useStorage} from '@vueuse/core';
import defaultSettings from '@/settings';

import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import en from 'element-plus/dist/locale/en.mjs';

export const useAppStore = defineStore({
  id: 'app',
  state: () => {
    const device = useStorage('device', 'desktop');
    const size = useStorage('size', defaultSettings.size);
    const language = useStorage('language', defaultSettings.language);

    const sidebarStatus = useStorage('sidebarStatus', 'opened');

    const sidebar = {
      opened: sidebarStatus.value !== 'closed',
      withoutAnimation: false
    };
    return {
      device, size, language,
      sidebarStatus, sidebar
    };
  },
  getters: {
    locale() {
      return this.language == 'en' ? en : zhCn;
    }
  },
  actions: {
    toggleSidebar(withoutAnimation) {
      this.sidebar.opened = !this.sidebar.opened;
      this.sidebar.withoutAnimation = withoutAnimation;
      if (this.sidebar.opened) {
        this.sidebarStatus = 'opened';
      } else {
        this.sidebarStatus = 'closed';
      }
    },
    closeSideBar(withoutAnimation) {
      this.sidebar.opened = false;
      this.sidebar.withoutAnimation = withoutAnimation;
      this.sidebarStatus = 'closed';
    },
    openSideBar(withoutAnimation) {
      this.sidebar.opened = true;
      this.sidebar.withoutAnimation = withoutAnimation;
      this.sidebarStatus = 'opened';
    },
    toggleDevice(val) {
      this.device = val;
    },
    changeSize(val) {
      this.size = val;
    },
    changeLanguage(val) {
      this.language = val;
    }
  }
});